<template>
  <div class="page-scan-mana">
    <el-form :inline="true" :model="dataQueryForm" ref="dataQueryForm">
    </el-form>

    <!--列表数据-->
    <egrid border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>

    <!--分页组件-->
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                     @on-query="queryCallBackFn" :pageSizes="[10]">
      </pc-pagination>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';

  export default {
    props: ['marketId'],
    data() {
      return {
        dataQueryForm: {
          marketId: this.marketId
        },
        tableData: [],
        columns: [
          {
            label: '系统编码',
            prop: 'marketDataNo'
          },
          {
            label: '一级编码',
            prop: 'mainLevelCode'
          },
          {
            label: '主产品',
            prop: 'mainProductName'
          },
          {
            label: '国家',
            prop: 'mainStandardCountry'
          },
          {
            label: '厂号',
            prop: 'mainStandardPlant'
          },
          {
            label: '二级编码',
            prop: 'subLevelCode'
          },
          {
            label: '产品名',
            prop: 'subProductName'
          },
          {
            label: '二级标',
            prop: 'subStandard'
          },
          {
            label: '市价(元/KG)',
            prop: 'marketPrice'
          },
          {
            label: '建议折率',
            prop: 'discountRateDisplay'
          },
          {
            label: '流通系数',
            prop: 'flowCoefficient'
          },
          {
            label: '主流产品',
            prop: 'isMainStreamDisplay'
          }
        ],
        columnsSchema: {
          '系统编码': {minWidth: 30},
          '一级编码': {minWidth: 35},
          '主产品': {minWidth: 40},
          '国家': {minWidth: 25},
          '厂号': {minWidth: 30},
          '产品名': {minWidth: 60},
          '二级标': {minWidth: 30},
          '市价(元/KG)': {minWidth: 32},
          '建议折率': {minWidth: 25},
          '流通系数': {minWidth: 25},
          '主流产品': {minWidth: 25}
        },
        selecetedRows: [],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 40,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/malisk/server/market/queryMarketDetailList'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog
    },
    created() {
    },

    methods: {
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      queryCallBackFn(res) {
        this.tableData = res.result.list;
      }
    }
  };
</script>
<style>
</style>
